import React, { useEffect, useState } from 'react'
import { Table, Space, Button } from 'antd'
import { ArticleListApi } from '@/request/api'

export default function List() {
  const [list, setList] = useState([])
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 10 })
  useEffect(() => {
    let { current: num, pageSize: count } = pagination
    fetchDara(num, count)
  }, [])

  const fetchDara = (num, count) => {
    let p = { num, count }
    ArticleListApi(p).then(res => {
      let { num: current, count: pageSize, total } = res.data
      setPagination({ current, pageSize, total })
      setList(res.data.arr)
    })
  }

  const pageChange = arg => {
    fetchDara(arg.current, arg.pageSize)
  }

  const columns = [
    {
      title: '姓名',
      dataIndex: 'title',
      width: '20%',
      render: (title, record) => {
        return (
          <>
            <p>{title}</p>
            <p>{record.subTitle}</p>
          </>
        )
      }
    },
    {
      title: '日期',
      dataIndex: 'date'
    },
    {
      title: '作者',
      dataIndex: 'author'
    },
    {
      title: '操作',
      key: 'action',
      render: record => {
        return (
          <Space size="middle">
            <Button type="primary">编辑</Button>
            <Button type="danger">删除</Button>
          </Space>
        )
      }
    }
  ]
  return (
    <div>
      <Table
        columns={columns}
        dataSource={list}
        rowKey={record => record.id}
        pagination={pagination}
        onChange={pageChange}
      />
    </div>
  )
}
